<template>
  <div class="bill main-box">
    <!-- 上半部分 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar title="账单">
          <template #right>
            <van-icon name="search" size="18" color="black" />
          </template>
        </van-nav-bar>
      </div>
      <!-- 筛选菜单 -->
      <FilerBar></FilerBar>
      <!-- 账单面板 -->
      <div class="panel panel-1">
        <div class="panel-bar">
          <div class="panel-bar-expenses">
            <input type="radio">
            <label>月支出 <span class="expenses-text">￥51.75</span></label>
            </input>
          </div>
          <div class="panel-bar-income">
            <input type="radio">
            <label>月收入 <span class="income-text">￥0.00</span></label>
            </input>
          </div>
        </div>
        <div class="chart">
          <div class="chart-text">
            <div class="chart-date">1月1日</div>
            <div class="chart-expenses">支出￥28.00</div>
            <div class="chart-income">收入￥0.00</div>
          </div>
          <div class="chart-main">
            <!-- 图表 -->
            <div class="chartContainer" ref="chartContainer" style=""></div>
          </div>
        </div>
      </div>
      <div class="panel panel-2">
        <div class="summarize">
          <div class="summarize-balance">月结余：<span class="expenses-text">￥-51.75</span></div>
          <div class="summarize-avgDay">日均支出：<span class="expenses-text">￥3.70</span></div>
        </div>
      </div>
    </div>
    <!-- 下半部分 -->
    <div class="main-b">
      <div class="bill-t">
        账单明细
      </div>
      <div class="bill-b">
        <MinBill />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Bill">
// 账单
import { onMounted, ref } from 'vue';
import MinBill from '@/components/MinBill.vue'
import FilerBar from '@/components/FilerBar.vue'

// 导入echarts用于生成图表
import * as echarts from 'echarts';

// 生成日期数据
// function test() {
//   let arr = []
//   for (let i = 1; i <= 31; i++) {
//     arr.push(i + '日')
//   }
//   arr[0] = '1月' + arr[0]
//   return arr
// }
// console.log(test())

// 日期数据
let dayArr = ["1月1日", "2日", "3日", "4日", "5日", "6日",
  "7日", "8日", "9日", "10日", "11日", "12日", "13日", "14日",
  "15日", "16日", "17日", "18日", "19日", "20日", "21日", "22日",
  "23日", "24日", "25日", "26日", "27日", "28日", "29日", "30日", "31日"]

// 账单数据
let billArr = [120, 0, 150, 0, 70, 110, 130]

// 图表数据
const chartContainer = ref(null);
onMounted(() => {
  const myChart = echarts.init(chartContainer.value, null, {
    height: 200
  })
  const option = {
    xAxis: {
      type: 'category',
      data: dayArr,
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [
      {
        data: billArr,
        type: 'bar'
      }
    ],
    color: [
      '#FB4051'
    ]
  }
  myChart.setOption(option);
})
</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);

.main-t {
  background-color: @gabelBgColor;
  height: 300px;

  .panel {
    background-color: #fff;
    border-radius: 50px;
    padding: 30px;
    margin: @gabelMargin;
    margin-top: 0px;
    font-size: 48px;
    position: relative;

    .panel-bar {
      font-size: 30px;
      display: flex;
      justify-content: space-between;
    }

    .chart {
      margin: 5px 0;

      .chart-text {
        font-size: 21px;
        display: flex;
      }

      .chart-text>div {
        padding-right: 10px;
      }

      .chartContainer {
        margin: -70px 0;
      }
    }

    .summarize {
      font-size: 28px;
      display: flex;
      justify-content: space-around;
    }
  }

  .panel-2 {
    padding: 10px;
  }
}

.main-b {
  height: 50%;
  font-size: 35px;
  margin: @gabelMargin;
  margin-top: 350px;
  .bill-t{
    padding-top: 10px;
    margin-bottom: 30px;
  }
}
</style>